<template>
  <div>
    <div style="height: 600px">
      <el-table style="overflow: auto" height="100%" :data="limits" stripe border highlight-current-row>
        <el-table-column prop="CMP_Name" label="公司"></el-table-column>
        <el-table-column label="姓名" width="200px">
          <template slot-scope="scope">
            <span style="color: red" v-if="scope.row.EMP_Status != 1">[{{ scope.row.EMP_StatusDesc
            }}]</span>{{ scope.row.USR_Name + '【' + scope.row.USR_Phone + '】' }}
          </template>
        </el-table-column>
        <el-table-column prop="RL_Name" label="操作" width="150px">
          <template slot="header" slot-scope="scope">
            <el-button size="mini" type="text" @click="addVis = true">添加限制</el-button>
          </template>
          <template slot-scope="scope">
            <el-button style="color: red" type="text" @click="deleteEmployeeCompanyEmpLimit(scope.row.ECEL_ID)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="addVis" title="添加限制" :append-to-body="true" width="540px">
      <el-form label-width="80px">
        <!-- {{ newLimit.CMP_ID }} -->
        <el-form-item label="公司">
          <el-select v-model="newLimit.CMP_ID" placeholder="请选择所属公司" style="width: 360px;"
            @input="getDepartmentCmpEmployees" filterable>
            <el-option v-for="cmp in cmps" :key="cmp.CMP_ID" :label="cmp.CMP_Name" :value="cmp.CMP_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员">
          <el-select v-model="newLimit.ECEL_LimitEmpID" placeholder="请选择人员" style="width: 360px;">
            <el-option v-for="emp in emps" :key="emp.EMP_ID" :label="emp.USR_Name + '【' + emp.USR_Phone + '】'"
              :value="emp.EMP_ID"> <span style="color: red" v-if="emp.EMP_Status != 1">[{{ emp.EMP_StatusDesc
              }}]</span>{{ emp.USR_Name + '【' + emp.USR_Phone + '】' }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="addEmployeeCompanyEmpLimit" type="primary">添加</el-button>
          <el-button @click="addVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getEmployeeCompanyEmpLimits,
  addEmployeeCompanyEmpLimit,
  deleteEmployeeCompanyEmpLimit,
} from '@/api/personal/departmentManage'
import {
  getDepartmentAllCompanies,
  getDepartmentCmpEmployees
} from '@/api/flowCenter/organiztion/departmentCmpEmpManage'
export default {
  props: ['empId', 'dpmId'],
  data: function () {
    return {
      limits: [],
      cmps: [],
      emps: [],
      newLimit: {
        CMP_ID: null,
        ECEL_EmployeeID: null,
        ECEL_LimitEmpID: null,
      },
      addVis: false,
    }
  },
  watch: {
    empId: function () {
      this.getEmployeeCompanyEmpLimits()
    },
    dpmId: function () {
      this.getDepartmentAllCompanies()
      this.getEmployeeCompanyEmpLimits()
    },
  },
  methods: {
    getDepartmentAllCompanies() {
      getDepartmentAllCompanies({ dpmId: this.dpmId }).then(({ data }) => {
        this.cmps = data
      })
    },
    getDepartmentCmpEmployees() {
      getDepartmentCmpEmployees({ dpmId: this.dpmId, cmpId: this.newLimit.CMP_ID }).then(({ data }) => {
        this.emps = data
      })
    },
    getEmployeeCompanyEmpLimits() {
      getEmployeeCompanyEmpLimits({ empId: this.empId, dpmId: this.dpmId }).then(({ data }) => {
        this.limits = data
      })
    },
    addEmployeeCompanyEmpLimit() {
      this.newLimit.ECEL_EmployeeID = this.empId
      this.newLimit.ECEL_DepartmentID = this.dpmId
      addEmployeeCompanyEmpLimit(this.newLimit).then(({ data }) => {
        this.getEmployeeCompanyEmpLimits()
        this.addVis = false
        this.newLimit = { ECEL_EmployeeID: null, ECEL_LimitEmpID: null }
        this.$emit('add', this.newLimit)
      })
    },
    deleteEmployeeCompanyEmpLimit(id) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(() => {
          deleteEmployeeCompanyEmpLimit(id).then(({ data }) => {
            this.getEmployeeCompanyEmpLimits()
          })
        })
        .catch(() => {
          return
        })
    },
  },
  mounted() {
    this.getEmployeeCompanyEmpLimits()
    this.getDepartmentAllCompanies()
  },
}
</script>
<style scoped></style>